<template>
    <div>
        <el-card class="box-card" style="margin: 10px 0px;">

            <div slot="header" class="clearfix">
                <!--头部左侧内容-->
                <!--  @tab-click="handleClick" -->
                <el-tabs class='tab' v-model="activeName">
                    <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                    <el-tab-pane label="访问量" name="visite"></el-tab-pane>
                </el-tabs>
                <!--头部右侧内容-->
                <div class="right">
                    <span>本日</span>
                    <span>本周</span>
                    <span>本月</span>
                    <span>本年</span>
                    <!--    v-model="value2"   -->
                    <el-date-picker class="date" type="datetimerange" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" size="mini">
                    </el-date-picker>
                </div>
            </div>
            <!-- 销售额内容 -->
            <div>
                <el-row :gutter="10">
                    <el-col :span="18">
                        <div class="charts" ref="charts"></div>
                    </el-col>
                    <el-col :span="6">
                        <div>
                            <h3>门店销售额排名</h3>
                            <ul>
                                <li>
                                    <span class="rindex">1</span>
                                    <span>肯德基</span>
                                    <span class="rvalue">323,222</span>
                                </li>
                                <li>
                                    <span class="rindex">2</span>
                                    <span>肯德基</span>
                                    <span class="rvalue">323,222</span>
                                </li>
                                <li>
                                    <span class="rindex">3</span>
                                    <span>肯德基</span>
                                    <span class="rvalue">323,222</span>
                                </li>
                                <li>
                                    <span class="rdindex">4</span>
                                    <span>肯德基</span>
                                    <span class="rvalue">323,222</span>
                                </li>
                                <li>
                                    <span class="rdindex">5</span>
                                    <span>肯德基</span>
                                    <span class="rvalue">323,222</span>
                                </li>
                                <li>
                                    <span class="rdindex">6</span>
                                    <span>肯德基</span>
                                    <span class="rvalue">323,222</span>
                                </li>
                                <li>
                                    <span class="rdindex">7</span>
                                    <span>肯德基</span>
                                    <span class="rvalue">323,222</span>
                                </li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'Sale',
    data() {
        return {
            activeName: 'sale'
        };
    },
    methods: {
        // handleClick(tab, event) {
        //     console.log(tab, event);
        // }
    },
    mounted() {
        let myChart = echarts.init(this.$refs.charts);
        myChart.setOption(
            {
                title: {
                    text: "销售额趋势",
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月',]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130, 140, 240, 120, 230, 150],
                        type: 'bar',

                    }
                ]
            })

    },
};
</script>

<style lang="scss" scoped>
.clearfix {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.tab {
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
}

.right span {
    margin: 0px 20px;
}

.date {
    width: 200px;
}

.charts {
    height: 300px;
    width: 100%;
}

ul {
    list-style: none;
    width: 100%;
    height: 300px;
    padding: 0px;
}

ul li {
    height: 8%;
    margin: 10px 0px;
}

.rindex {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 30px;
    border-radius: 50%;
    background-color: black;
    color: white;
    text-align: center;

}

.rdindex {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 30px;
    text-align: center;
}


.rvalue {
    float: right;
}
</style>